<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">
      /*
        定义一个函数,专门用来为指定元素绑定单击响应事件
          参数:
            fid 要绑定单击响应函数的id属性值
            fun 事件的回调函数,当单击元素时,该函数将会被触发
      */
      function MyClick(fid, fun) {
        var btn = document.getElementById(fid);
        btn.onclick = fun;
      }

      window.onload = function () {
        //为id为btn01的按钮绑定一个单击响应函数
        var btn01 = document.getElementById('btn01');

        btn01.onclick = function () {
          //查找#bj节点
          var bj = document.getElementById('bj');
          //打印bj
          //innerHTML, 通过这个属性可以获取到元素内部的html代码,比如<li>北京</li>,获取北京
          //这个方法
          alert(bj.innerHTML);
        };

        //为id为btn02的按钮绑定一个单击响应函数
        var btn02 = document.getElementById('btn02');
        btn02.onclick = function () {
          //查找所有li节点
          //getElementsByTagName()可以根据标签名来获取一组元素节点对象
          //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到数组中
          //即使查询到的元素,也会封装到数组中
          var lis = document.getElementsByTagName('li');

          //打印lis
          alert(lis.length);

          //遍历lis
          for (var i = 0; i < lis.length; i++) {
            /*
              innertHTML用于获取元素内部的html代码
            */
            alert(lis[i].innerHTML);
          }
        };

        //为id为btn03的按钮绑定一个单击响应函数
        var btn03 = document.getElementById('btn03');

        btn03.onclick = function () {
          //查找name=gender的所有节点
          var inputs = document.getElementsByName('gender');
          // alert(inputs.length);

          for (var i = 0; i < inputs.length; i++) {
            /*
              innerHTML用于获取元素内部的html代码
                对于自结束标签,这个属性没有意义
            */

            /*
              如果需要读取元素节点的属性,
                直接使用元素.属性名
                注意: class属性不能采用这种方式
                      读取class属性时需要使用元素.className
            */
            alert(inputs[i].className);
          }
        };
        //为id为btn04的按钮绑定一个单击响应函数
        var btn04 = document.getElementById('btn04');
        btn04.onclick = function () {
          //获取id为city的元素
          var city = document.getElementById('city');

          //查找#city下所有li节点
          var liList = city.getElementsByTagName('li');

          for (var i = 0; i < liList.length; i++) {
            alert(liList[i].innerHTML);
          }
        };

        //为id为btn05的按钮绑定一个单击响应函数
        var btn05 = document.getElementById('btn05');
        btn05.onclick = function () {
          //获取id为city的节点
          var city = document.getElementById('city');
          //返回#city的所有子节点
          /*
            childNode属性会获取包括文本节点在内的所有节点
              根据DOM标签间的空白也会当成文本节点
              注意: 在IE8及以下的浏览器中,不会将空白文档当成子节点。
                所以该属性在IE8中会返回4个子元素
          */
          var cns = city.childNodes;

          for (var i = 0; i < cns.length; i++) {
            alert(cns[i]);
          }

          /*
            children属性可以获取当前元素的所有子元素
          */
          var cns2 = city.children;
          alert(cns2.length);
        };

        //为id为btn06的按钮绑定一个单击响应函数
        var btn06 = document.getElementById('btn06');
        btn06.onclick = function () {
          //获取id为phone的元素
          var phoneId = document.getElementById('phone');
          //返回#phone的第一个子节点
          // var firstChild = phoneId.childNodes[0];
          // 也可以使用firstChild表示当前节点的第一个子节点(包括空白文本节点,只要有空格,肯定会先获取空格)
          // lastChild 属性,表示当前节点的最后一个子节点
          var firstChild = phoneId.firstChild;
          alert(firstChild);

          //firstElementChild获取当前元素的第一个子元素
          /*
            firstElementChild不支持IE8及以下的浏览器
              如果需要兼容他们尽量不要使用
          */
          var fir = phone.firstElementChild;
          alert(fir);

          var lastChild = phoneId.lastChild;
          alert(lastChild);
        };

        //为id为btn07的按钮绑定一个单击响应函数
        MyClick('btn07', function () {
          //获取id为bj的节点
          var bj = document.getElementById('bj');

          //返回#bj的父节点
          //parentNode 属性,表示当前节点的父节点
          var pn = bj.parentNode;

          alert(pn.innerHTML);

          /*
            innerText
              - 该属性可以获取到元素内部的文本内容
              - 它和innerHTML类似,不同的是它会自动将html标签去除
          */
          alert(pn.innerText);
        });

        //为id为btn08的按钮绑定一个单击响应函数

        MyClick('btn08', function () {
          //获取id为android的元素
          var and = document.getElementById('android');
          //返回#android的前一个兄弟节点
          //previousSibling 属性,表示当前节点的前一个兄弟节点(也可能获取到空白的文本)
          //但是IE8及以下不支持这个API
          var ps = and.previousSibling;
          alert(ps);

          var pe = and.previousElementSibling;
          alert(pe);
        });

        //读取#username的value属性值
        MyClick('btn09', function () {
          //获取id为username的元素
          var um = document.getElementById('username');
          //读取um的value的属性值
          //文本框的value属性值,就是文本框中填写的内容
          alert(um.value);
        });

        //设置#username的value属性值
        MyClick('btn10', function () {
          //获取id为username的元素
          var um = document.getElementById('username');
          um.value = '今天天气真不错~~~!';
        });

        //返回#bj的文本值
        MyClick('btn11', function () {
          var bj = document.getElementById('bj');
          //在元素内部没有标签的时候,这两个是没有区别的
          alert(bj.innerHTML);
          alert(bj.innerText);
        });
      };
    </script>
  </head>
  <body>
    <!-- 
        获取元素节点
          - 通过document对象调用
            1.getElementById()
              - 通过id属性获取一个元素节点对象
            
            2.getElementsByTagName()
              - 通过标签名获取一组元素节点对象
            
            3.getElementsByName()
              - 通过name属性获取一组元素节点对象

    -->
    <div id="total">
      <div class="inner">
        <p>你喜欢哪个城市?</p>

        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>东京</li>
          <li>首尔</li>
        </ul>

        <br />
        <br />

        <p>你喜欢哪款单机游戏?</p>

        <ul id="game">
          <li id="rl">红警</li>
          <li>实况</li>
          <li>极品飞车</li>
          <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>你手机的操作系统是?</p>

        <ul id="phone">
          <li>IOS</li>
          <li id="android">Android</li>
          <li>Windows Phone</li>
        </ul>
      </div>

      <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male" />
        Male
        <input class="hello" type="radio" name="gender" value="female" />
        Female
        <br />
        <br />
        name:
        <input type="text" name="name" id="username" value="abcde" />
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">查找#bj节点</button></div>
      <div><button id="btn02">查找所有li节点</button></div>
      <div><button id="btn03">查找name=gender的所有节点</button></div>
      <div><button id="btn04">查找#city下所有li节点</button></div>
      <div><button id="btn05">返回#city的所有子节点</button></div>
      <div><button id="btn06">返回#phone的第一个子节点</button></div>
      <div><button id="btn07">返回#bj的父节点</button></div>
      <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
      <div><button id="btn09">返回#username的value属性值</button></div>
      <div><button id="btn10">设置#username的value属性值</button></div>
      <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
  </body>
</html>
